<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">
		<view style="position: relative;">
			
			<ListTools :total="count" :sedate="{st: stime, et: etime}" @selDate="selAlSeDate">
			</ListTools>
			<view v-if="tabIndex == 0" @click="routeSimpleName_btn" class="routeSimpleName">
				<view>{{routeSimpleName}}</view>
				<u-icon name="arrow-down-fill" size="20"></u-icon>
			</view>
		</view>
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="false">


			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="my-list">
				<view class="ml-item" v-for="(it, index) in dataList" :key="it.id">
					<view class="i-title-row">
						<!-- <CheckState :stakey="it.isCheck"></CheckState> -->
						<view style="font-size: 14px;font-weight: 700;padding: 5rpx;background-color: crimson;color: #fff;" :style="routeSimpleName=='已审核'?'background-color: #55aa00;':'background-color: crimson;'">{{it.isCheck}}</view>
						<view class="r-title">{{it.moneyTypeName}}</view>
						<view class="r-detail-btn" @click="showBzDetail(it.id)">详情
							<u-icon name="arrow-right" color="#666"></u-icon>
						</view>
					</view>

					<view class="i-row">
						<view class="r-icon"><u-icon name="car-fill" color="#00c3ce"></u-icon></view>
						<view class="r-con">{{it.plateNum?it.plateNum:""}}</view>
					</view>
					<!-- 车辆行程收支记录 -->
					<template v-if="it.orderNum">
						<view class="i-row">
							<view class="r-icon"><u-icon name="tags-fill" color="#00c3ce"></u-icon></view>
							<view class="r-con">{{it.orderNum}}</view>
						</view>

						<!-- 	<view class="i-row">
							<view class="r-icon"><u-icon name="calendar-fill" color="#00c3ce"></u-icon></view>
							<view class="r-con">{{U.sedate(it.stime, it.etime)}}</view>
						</view> -->

						<view class="i-row">
							<view class="r-icon"><u-icon name="rmb-circle-fill" color="#00c3ce"></u-icon></view>
							<view class="r-con">{{it.reimMoney}} 元</view>
						</view>
					</template>
					<template v-else> <!-- 驾驶员记账记录 -->
						<view class="i-row">
							<view class="r-icon"><u-icon name="rmb-circle-fill" color="#00c3ce"></u-icon></view>
							<view class="r-con">
								<view class="tag">{{it.driverJzRecordId.payWay}}</view>
								<view class="text">{{it.reimMoney}} 元</view>
							</view>
						</view>

						<view class="i-row">
							<view class="r-icon"><u-icon name="calendar-fill" color="#00c3ce"></u-icon></view>
							<view class="r-con" v-if="it.driverJzRecordId == '21'||it.driverJzRecordId == '22' ">
								{{U.sedate(it.costStartTime, it.costEndTime)}}
							</view>
							<view class="r-con" v-else>{{it.payTime | time('yyyy年MM月dd号')}} {{!it.payTime ? '无' : ''}}
							</view>
						</view>
					</template>

					<view class="i-row">
						<view class="r-icon"><u-icon name="clock-fill" color="#00c3ce"></u-icon></view>
						<view class="r-con">{{it.addTime}}</view>

						<view v-if="it.isCheck == '未审核'" class="c-btns">
							<u-button size="mini" :custom-style="{'color': '#00c3ce', 'margin-right': '10rpx'}"
								:data-obj="it" @click="updBz(it)">
								<u-icon name="edit-pen-fill"></u-icon> 修改
							</u-button>

							<u-button size="mini" :custom-style="{'color': '#f00000'}" @click="delBz(it.id, index)">
								<u-icon name="trash-fill"></u-icon> 删除
							</u-button>
						</view>
					</view>

				</view>
			</view>
		</z-paging>
		<u-select  :default-value='defaultValue'  @confirm="routeSimpleName_sheet" :label-name='"text"' :value-name='"text"'
			v-model="routeSimpleName_show" :list="routeSimpleNameList"></u-select>
	</view>
</template>

<script>
	import CheckState from '@/components/check-state/check-state.vue';
	import ListTools from '@/components/list-tools/list-tools.vue';
	export default {
		name: 'SwiperListItem',
		components: {
			CheckState,
			ListTools
		},
		data() {
			return {
					defaultValue: [0],
					
				routeSimpleNameList: [
					{
						text: '未审核',
					},
					{
						text: '已审核',
					},
					
					{
						text: '已拒绝',
					},
				],
				routeSimpleName_show: false,
				count: 0,
				// 开始时间
				stime: this.U.getMonthFirstDay(new Date(), 1).split(' ')[0],
				// 结束时间
				etime: this.U.getMonthLastDay(new Date(), 1).split(' ')[0],
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				firstLoaded: false,
				routeSimpleName: '未审核',
			}
		},
		props: {
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							setTimeout(() => {
								this.$refs.paging.reload();
							}, 5);
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			selAlSeDate(e) {
				// console.log('起止日期选择事件', e);

				this.stime = e.st;
				this.etime = e.et;

				// 重新查询
				this.queryList(1, 20);
			},
			// 查询数据
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				let reimStatus2 = []
				if(this.tabIndex == 0){
					if(this.routeSimpleName == '已审核'){
						reimStatus2 =['CHECKED']
					}else if(this.routeSimpleName == '未审核'){
						reimStatus2 =['NO_CHECK']
					}else{
						reimStatus2 = ['REFUSED']
					}
				}else{
					reimStatus2 = ['CANCELLATION ','SETTLED ']
				}
				const params = {
					page: {
						pageNum: pageNo,
						pageSize: pageSize
					},
					reimStatus:reimStatus2,
					
					timeType: '0',
					stime: this.stime,
					etime: this.etime,
				}
				console.log(JSON.stringify(params))
				this.$u.api.getAlBxList(params).then(res => {
					if (res.code == 1) {
						//将请求的结果数组传递给z-paging
						this.$refs.paging.complete(res.data.list);
						this.firstLoaded = true;
						this.count = res.data.total
					}
				});
			},
			routeSimpleName_sheet(e) {

				// 重新查询
				let that = this
				let index = 0;
				for (let i = 0; i < that.routeSimpleNameList.length; i++) {
					if (that.routeSimpleNameList[i].text == e[0].value) {
						index = i;
						break
					}
				}
				that.defaultValue[0] = index;
				for (let i = 0; i < that.routeSimpleNameList.length; i++) {
					if (e[0].value == that.routeSimpleNameList[i].text) {
						let data = that.routeSimpleNameList[i]
						that.routeSimpleName = that.routeSimpleNameList[i].text

					}
				}
				that.queryList();
			},
			routeSimpleName_btn() {
				this.routeSimpleName_show = true
			},
			// 显示详情
			showBzDetail(id) {
				uni.navigateTo({
					url: '/bz-man/all-bz-list/bz-detail/bz-detail?id=' + id
				});
			},
			/**
			 * 导航-修改报账页面
			 * @param {Object} bzType 报账类型
			 * @param {Object} id 报账对象id
			 */
			updBz(e) {
				console.log(e)
				if (e.orderNum) {
					if (e.moneyTypeName == '停车费') {
						uni.navigateTo({
							url: '/bz-man/all-bz-list/adup-xc1/adup-xc1?id=' + e.id
						})
					} else {
						uni.navigateTo({
							url: '/bz-man/all-bz-list/adup-xc2/adup-xc2?id=' + e.id
						})
					}
				} else {
					if (e.moneyTypeName == '燃油费') {
						uni.navigateTo({
							url: '/bz-man/all-bz-list/adup-jybz/adup-jybz?id=' + e.id
						})
					} else if (e.moneyTypeName == '维修费') {
						uni.navigateTo({
							url: '/bz-man/all-bz-list/adup-wxbz/adup-wxbz?id=' + e.id
						})
					} else if (e.moneyTypeName == '审车费') {
						uni.navigateTo({
							url: '/bz-man/all-bz-list/adup-scbz/adup-scbz?id=' + e.id
						})
					} else {
						uni.navigateTo({
							url: '/bz-man/all-bz-list/adup-qtbz/adup-qtbz?id=' + e.id
						})
					}
				}

				// let url = '/bz-man/all-bz-list';
				// if(bzType != '8' ||bzType != '9' ||bzType != '21'||bzType != '22'||bzType != '39'){// 行程报账
				// 	url += '/adup-xcbz/adup-xcbz';
				// }else if(bzType == '8'){// 加油报账
				// 	url += '/adup-jybz/adup-jybz';
				// }else if(bzType == '9'){// 维修报账
				// 	url += '/adup-wxbz/adup-wxbz';
				// }else{// 其他报账
				// 	url += '/adup-qtbz/adup-qtbz';
				// }

				// uni.navigateTo({url: url+'?id='+id});
			},
			// 删除报账
			delBz(id, index) {
				let that = this,
					U = that.U;

				U.qconfim('确认删除该报账记录吗？', function(e) {
					if (e.confirm) {
						that.$u.api.delBz({
							id: id
						}).then(res => {
							if (res.code == 1) {
								U.qinfo(res.msg);

								// 更新列表
								that.$refs.paging.refresh();
							} else {
								U.qerror(res.msg);
							}
						});
					}
				});

			}
		}
	}
</script>

<style>
	.routeSimpleName {
		position: absolute;
		left: 380rpx;
		width: 200rpx;
		background: #fff;
		top: 10rpx;
		z-index: 9999;
		text-align: center;
		border-radius: 10rpx;
		border: 1px solid #00C3CE;
		color: #00C3CE;
		margin-right: 10rpx;
		display: flex;
		height: 40rpx;
		justify-content: space-between;

	}

	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.content {
		height: 100%;
		background: #f3f3f3;
	}

	.item {
		background: #fff;
		box-shadow: 0 2rpx 3rpx rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
		margin: 0rpx 20rpx 20rpx 20rpx;
		padding: 20rpx 10rpx 14rpx 20rpx;
	}
</style>